<template>
  <div class="m-content">
    <m-row :gutter="20">
      <m-col :span="24">
        <div class="pl-box">
          <div class="pl-label">产线选择：</div>
          <div class="pl-content">
            <el-select v-model="curWorkcenterCode" placeholder="请选择" class="pl-select" size="large" @change="workcenterChange">
              <el-option class="m-option" v-for="item in props.options" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </div>
        </div>
      </m-col>
      <m-col :span="24">
        <div class="pl-box">
          <div class="pl-label">当前时间：</div>
          <div class="pl-content">{{ datetime }}</div>
        </div>
      </m-col>
      <m-col :span="24">
        <div class="pl-box">
          <div class="pl-label">当日产线总产量：</div>
          <div class="pl-content">{{ props.total }}</div>
        </div>
      </m-col>
    </m-row>
  </div>
</template>
<script setup>
import http from '@/utils/request'
import moment from 'moment'


let curWorkcenterCode = ref("")

// props
const props = defineProps({
  options: {
    type: Array,
    default: () => { return [] }
  },
  total: {
    type: Number,
    default: 0
  }
})

// emits
const emits = defineEmits(["change"])

// 变量
let timer = ref()
let datetime = ref('')




// 初始化
async function init() {}

// 指定选中哪个选项（供父组件调用）
function select(val) {
  curWorkcenterCode.value = val
  workcenterChange(val)
}

// 指定选中哪个选项（供父组件调用）
function setValue(val) {
  curWorkcenterCode.value = val
}

// 切换产线
function workcenterChange(val) {
  const opt = props.options.find(r => r.value === val)
  emits("change", val, opt)
}













onBeforeMount(() => {
  datetime.value = moment().format("yyyy-MM-DD HH:mm:ss")
  timer.value = setInterval(() => {
    datetime.value = moment().format("yyyy-MM-DD HH:mm:ss")
  }, 1000)
})

onUnmounted(() => {
  clearInterval(timer.value)
})

onMounted(() => {
  init()
})
// 暴露方法
defineExpose({
  init, select, setValue
})
</script>
<style lang="less" scoped>
.m-content {
  font-size: 18px;
  height: 100%;
  .m-row {
    height: 100%;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    .m-col {
      .pl-box {
        display: flex;
        align-items: center;
        .pl-label {
          min-width: 5em;
        }
        .pl-content {
          flex: 1;
          ::v-deep(.pl-select) {
            // height: 40px;
            width: 240px;
            .el-select__wrapper {
              height: 100%;
              background-color: transparent;
              box-shadow: 0 0 0 1px #efefef3b inset;
              .el-select__selection {
                .el-select__selected-item {
                  color: #FFF;
                  font-size: 16px;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
<style>
.el-select-dropdown__list {
  background-color: #021843;
}
.m-option {
  font-size: 18px;
  height: 42px;
  line-height: 42px;
  background-color: #021843;
  color: #FFF;
}
.m-option.is-hovering {
  color: #021843;
}
</style>